<template>
  <div class="details-page">
    <div class="details-page-top">
      <top-header title="搜索结果"></top-header>
      <addressTitle class="details-page-addresstitle" />
      <div class="search-around-input display">
        <search-input ref="searchInput"
                      class="search-component"
                      :placeholder_value="search_placeholder_value"
                      @input="
						(e) => {
							searchWord = e.value;
						}
					"
                      @goSearch="goSearch"></search-input>
        <div class="search-button"
             @click="goSearch">搜索</div>
      </div>
      <div class="double-tabs">
        <van-tabs v-show="!$route.query.module_name"
                  :animated="true"
                  :class="index === 0 ? 'top-tabs' : 'bottom-tabs'"
                  color="#3B81FF"
                  :line-width="index === 0 ? '.676329rem' : 0"
                  :v-model="index === 0 ? active_top : active_bottom"
                  v-for="(item, index) of tab_list"
                  :key="index"
                  class="tab-style"
                  @click="onTabsClick">
          <van-tab :title="t.title"
                   v-for="(t, i) of item.children"
                   :key="t.id">
            <template #title>
              {{ t.title }}
              <div v-if="active_bottom_flag === i && ['距离最近', '最高人气', '评分最高'].includes(t.title)"
                   class="table-style-select"></div>
            </template>
          </van-tab>
        </van-tabs>
        <van-tabs v-show="$route.query.module_name"
                  :animated="true"
                  color="#3B81FF"
                  :line-width="0"
                  :v-model="active_bottom"
                  class="tab-style bottom-tabs"
                  style="margin-top: 0.531401rem"
                  @click="onTabsClick">
          <van-tab :title="t.title"
                   v-for="(t, i) of tab_list"
                   :key="t.id">
            <template #title>
              {{ t.title }}
              <div v-if="active_bottom_flag === i"
                   class="table-style-select"></div>
            </template>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <TourGuide v-if="$route.query.module_name === '0'"
               ref="TourGuide"
               :searchWord="searchWord"
               isSearch
               class="m-t-10" />
    <card-list class="details-page-cardlist"
               :isSearch="true"
               v-if="!default_flag && $route.query.module_name != '0'"
               :card_list="card_list"
               :button_text="button_text"
               :module_name="$route.query.module_name || module_name"
               :page_config="card_loading_config"
               @onLoad="onLoad"
               @onRefresh="onRefresh"></card-list>
    <default v-show="default_flag"
             :img="require('@/assets/image/sousuojieguo@3x.png')"
             text="暂无搜索结果"></default>
  </div>
</template>

<script>
import SearchInput from '@/components/SearchInput';
import TopHeader from '@/components/TopHeader';
import addressTitle from '@/components/addressTitle';
import CardList from '@/components/CardList';
import TourGuide from '@/components/TourGuide';
import Default from '@/components/Default';
import cookie from '@/utils/cookie';
export default {
	name: 'index',
	components: {
		SearchInput,
		TopHeader,
		addressTitle,
		CardList,
		TourGuide,
		Default,
	},
	data() {
		return {
			active_top: 0, //tabs上面
			active_bottom: 1, //tabs下面
			active_bottom_flag: 0, //tabs下面选中标识
			list_loading: false, //页表加载标识
			finished: false, //列表停止加载标识
			refreshing: false, //列表刷新标识
			searchWord: '', //搜索参数
			search_placeholder_value: '', //搜索框placeholder
			button_text: '', //列表按钮文字
			module_name: '1', //模块
			nav_list: [], //navlist
			list_total: 0, //列表总数
			default_page: 1, //列表默认页
			card_loading_config: {
				loading: false, //列表加载标识
				finished: false, //列表停止加载标识
				refreshing: false, //列表下拉刷新标识
			},
			tab_list: [
				//tabs列表
				{
					children: [{ title: '热销门票' }, { title: '优选住宿' }, { title: '热门美食' }, { title: '优选特产' }],
				},
				{
					children: [{ title: '距离最近' }, { title: '最高人气' }, { title: '评分最高' }],
				},
			],
			card_list: [], //card总列表
			card_list_new: [], //接口新获取的列表
			default_flag: false, //缺省页标识
			default_time: 0, //函数节流
		};
	},
	mounted() {
		this.module_name = this.$route.query.module_name;
        if(!this.$route.query.module_name) {
            this.module_name = '1'
        }
		this.getTabsList(this.$route.query.module_name);
		this.$refs.searchInput.setValue(this.$route.query.search_word);
		this.searchWord = this.$route.query.search_word;
		this.nav_list = JSON.parse(localStorage.getItem('NavList'));
		if (!this.$route.query.module_name) {
			this.tab_list[0].children.forEach((x, i) => {
				x.title = this.nav_list[i + 1].name;
			});
		}
	},
	methods: {
		getTabsList(name) {
			//获取tabs列表
			switch (name) {
				case '0':
					this.searchWord = this.$route.query.search_word;
					this.$refs.searchInput.setValue(this.$route.query.search_word);
					this.search_placeholder_value = '景区';
					this.button_text = '';
					this.tab_list = [{ title: '距离最近' }, { title: '最高人气' }, { title: '评分最高' }];
					break;
				case '1':
					this.$refs.searchInput.setValue(this.$route.query.search_word);
					this.search_placeholder_value = '景区/门票';
					this.button_text = '';
					this.tab_list = [{ title: '距离最近' }, { title: '最高人气' }, { title: '评分最高' }];
					break;
				case '2':
					this.$refs.searchInput.setValue(this.$route.query.search_word);
					this.search_placeholder_value = '酒店/民宿';
					this.button_text = '预定';
					this.tab_list = [{ title: '距离最近' }, { title: '最高人气' }, { title: '评分最高' }];
					break;
				case '3':
					this.$refs.searchInput.setValue(this.$route.query.search_word);
					this.search_placeholder_value = '请输入餐馆名称';
					this.button_text = '预定';
					this.tab_list = [{ title: '距离最近' }, { title: '最高人气' }, { title: '评分最高' }];
					break;
				case '4':
					this.$refs.searchInput.setValue(this.$route.query.search_word);
					this.search_placeholder_value = '请输入特产名称';
					this.button_text = '购买';
					this.tab_list = [{ title: '距离最近' }, { title: '最高人气' }, { title: '评分最高' }];
					break;
				default:
					this.search_placeholder_value = '景区/门票';
			}
		},
		onTabsClick(name, title) {
			console.log(title);
			//tabs点击
			switch (title) {
				case '距离最近':
				case '最高人气':
				case '评分最高':
					break;
				case '热销门票':
                    this.module_name = '1'
					break;
				case '优选住宿':
                    this.module_name = '2'
					break;
				case '热门美食':
                    this.module_name = '3'
					break;
				case '优选特产':
                    this.module_name = '4'
					break;
			}
			this.onRefresh();
		},
		changePage(val) {
			this.getCommoditiesList(val);
		},
		getCommoditiesList(val) {
			console.log( this.searchWord);
			//获取门票列表
			_api
				.api_userPortal_tourProduct_getListByCon({
					town_id: cookie.get('town_id'),
					type: this.module_name,
					status: 1,
					page: val,
					search_word: this.searchWord,
					level: 'Y,img,sku_min_price',
				})
				.then((res) => {
					this.card_list_new = res.data.data;
					this.list_total = res.data.total;
					this.concatList();
					if (this.list_total.length === 0) {
						this.default_flag = true;
					}
				})
				.catch((error) => {
					console.log(error);
				});
		},
		onLoad(val) {
			//加载列表
			if (this.card_loading_config.refreshing) {
				this.card_list = [];
				this.card_loading_config.refreshing = false;
			}
			this.changePage(this.default_page++);
		},
		concatList() {
			//合并列表
			this.card_list = this.card_list.concat(this.card_list_new);
			this.card_loading_config.loading = false;
			if (this.card_list.length >= this.list_total) {
				this.card_loading_config.finished = true;
			}
		},
		onRefresh() {
			// 清空列表数据
			this.card_list = [];
			this.card_loading_config.finished = false;
			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.card_loading_config.loading = true;
			this.default_page = 1;
			this.onLoad(this.default_page);
		},
		goSearch() {
			//搜索
			const NOW = Date.now(); //函数节流
			if (NOW - this.default_time > 2000) {
				switch (this.$route.query.module_name || this.module_name) {
					case '0':
						this.$refs.TourGuide.searchFn();
						break;
					case '1':
						this.onRefresh();
						break;
					case '2':
						this.onRefresh();
						break;
					case '3':
						this.onRefresh();
						break;
					case '4':
						this.onRefresh();
						break;
					default:
						console.log('default');
				}
				this.default_time = NOW;
			} else {
				this.$toast('操作太频繁啦！');
			}
		},
	},
};
</script>

<style lang="scss" scoped>
@import 'style.scss';
</style>
